<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>南国早报新媒体刊例</title>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style type="text/css">
    	*{
    		margin:0;
    		padding:0;
    		border:0;
    	}
    	body{
    		overflow:hidden;
    	}
    	.swiper-container{
    		width:100%;
    		height:100%;
    	}
    	.swiper-container2{
    		position:absolute;
    		top:0;
    		z-index: 100;
    		width:100%;
    		height:100%;
    	}
    	.swiper-container3{
    		position:absolute;
    		top:0;
    		z-index: -1;
    		width:100%;
    		height:100%;
    	}
    	.swiper-container .swiper-slide{
    		background-position-y:center;
    	}
    	.swiper-container2 .swiper-slide{
    		background-size:1800%;
    		background-image:url(img/light.png);
    	}
    	.swiper-container3 .swiper-slide{
    		background-size:1800%;
    		background-image:url(img/bg.jpg);
    	}
    	.swiper-slide{
    		width:100%;
    		height:100%;
    		background-size: 100%;
    		background-repeat: no-repeat;
    	}
    	.showImg{
    		position:absolute;
    		z-index:1;
    		top:0;
    		left:0;
    		right:0;
    		bottom:0;
    		background-size:100%;
    		background-position-y: center;
    		background-repeat: no-repeat;
    	}
    	
    	#index{
    		position:fixed;
    		top:0;
    		left:0;
    		bottom:0;
    		right:0;
    		background-image: url(img/enter.jpg);
    		background-size: 100%;
    		background-color:#fff;
    		z-index: 1000;
    	}
    	#index img{
    		position:absolute;
    		width:50%;
    		left:25%;
    		top:65%;
    		animation: myfirst 1s infinite ease;
    	}
    	@keyframes myfirst
		{
		from {opation:0.5;}
		to {opation:1;}
		}
		.slideLeft{
			position:absolute;
			width:60%;
			bottom:10%;
			left:20%;
		}
		.clickShow{
			position:absolute;
			width:25%;
			top:15%;
			right:10%;
		}
		table{
			position:absolute;
			
			top:5%;
			width:90%;
			left:5%;
		}
		.table{
			position:absolute;
			display:none;
			top:0%;
			left:0;
			bottom:0;
			right:0;
			background-color:rgba(0,0,0,.6);
			z-index: 10000;
		}
		.table img{
			position:absolute;
			bottom:5%;
			width:24%;
			left:38%;
		}
		table th{color:#fff;width:50%;padding:5%;font-size:14px;font-weight: bold;}
		table td{color:#333;width:50%;padding:3.4%;font-size:12px;}
		table th:nth-of-type(1){background-color:rgb(220,80,50);}
		table th:nth-of-type(2){background-color:rgb(233,87,58);}
		table tr:nth-of-type(even) td:nth-of-type(1){background-color:rgb(244,204,200);}
		table tr:nth-of-type(odd) td:nth-of-type(1){background-color:rgb(244,238,237);}
		table tr:nth-of-type(even) td:nth-of-type(2){background-color:rgb(255,255,255);}
		table tr:nth-of-type(odd) td:nth-of-type(2){background-color:rgb(230,230,230);}

		.rotate{animation:rot 2s linear infinite;-webkit-animation:rot 2s linear infinite;}

			@keyframes rot{
	
				0%{transform:rotate(0deg);}
	
				50%{transform:rotate(180deg);}
	
				100%{transform:rotate(360deg);}
	
			}
	
			@-webkit-keyframes rot{
	
				0%{transform:rotate(0deg);}
	
				50%{transform:rotate(180deg);}
	
				100%{transform:rotate(360deg);}
	
			}
			
			#loadding{
				position:fixed;
				z-index:110001;
				top:0;
				left:0;
				right:0;
				bottom:0;
				background-color:#fff;
				text-align:center;
				vertical-align:middle;
				line-height:22em;
			}
    </style>
</head>
<body>
	<div id="loadding">加载中……</div>
	<audio id="audio" src="./img/music.mp3" autoplay="" preload="" loop=""></audio>
	<img class="rotate" src="./img/floor.png" id="cls" style="display:block;width:10%;position:absolute;z-index: 60;font-weight:700;right:10px;top:10px;z-index:20000;">
	<div id="index">
		<img id="indexbtn" src="img/btn.png"/>
	</div>
	
	
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"></div>
			<div class="swiper-slide" style="background-image:url(img/1.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/2.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/3.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/4.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/5.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/6.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/7.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/8.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/9.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/10.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/11.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/12.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/13.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/14.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/15.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/16.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/17.png);"></div>
			<div class="swiper-slide" style="background-image:url(img/last.jpg);"></div>
			<div class="swiper-slide" style="background-color:rgba(0,0,0,.3);;"></div>
		</div>
	</div>
	<div class="swiper-container2">
		<div class="swiper-wrapper">
			<div class="swiper-slide" style="background-position-x:0;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/1.png);"><img class="slideLeft" src="img/left.gif"/></div></div>
			<div class="swiper-slide" style="background-position-x:5.88%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/2.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:11.76%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/3.png);">
			</div></div>
			<div class="swiper-slide" style="background-position-x:17.64%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/4.png);">
				
			</div></div>
			<div class="swiper-slide" style="background-position-x:23.52%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/5.png);"><img class="clickShow" src="img/click.gif"/>
			<div class="table1 table">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr><th>名称</th><th>详情</th></tr>
						<tr><td>微信单篇图文/单条刊例直发</td><td>头条30000元，第二条12000元，第三至六条10000元</td></tr>
						<tr><td>顶部冠名/头部banner</td><td>头条1000元/次，第二条800元/次，第三至六条600元/次(30天起投)</td></tr>
						<tr><td>底部硬广/插入式广告/尾部banner</td><td>头条4000元/次，第二条3500元/次，第三至六条3000元/次</td></tr>
						<tr><td>早新闻栏目头图冠名</td><td>刊例1000元/天（10天起投）</td></tr>
					</table>
					<img src="img/close.png"/>
				</div></div></div>
			<div class="swiper-slide" style="background-position-x:29.4%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/6.png);"><img class="clickShow" src="img/click.gif"/>
				<div class="table1 table">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr><th>名称</th><th>详情</th></tr>
						<tr><td>微信单篇图文/单条刊例直发</td><td>头条15000元，第二条8000元，第三至六条5000元</td></tr>
						<tr><td>顶部冠名/头部banner</td><td>头条800元/次，第二条600元/次，第三至六条500元/次（30天起投）</td></tr>
						<tr><td>底部硬广/插入式广告/尾部banner</td><td>头条3000元/次，第二条2000元/次，第三至六条1000元/次</td></tr>
					</table>
					<img src="img/close.png"/>
				</div>
			</div></div>
			<div class="swiper-slide" style="background-position-x:35.28%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/7.png);"><img class="clickShow" style="top:0%;" src="img/click.gif"/>
				<div class="table1 table">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr><th>名称</th><th>详情</th></tr>
						<tr><td>单篇图文/单篇广告</td><td>头条5000元，第二条3000元，第三、四条2000元</td></tr>
						<tr><td>第一条底部硬广</td><td>1000元/2次，2000元/10次，20000元/160次</td></tr>
						<!--
						<tr><td>当日底部（随机选择位置）</td><td>2000元/次</td></tr>
						<tr><td>包月贴片（随机选择位置）</td><td>20000元/次</td></tr>
						-->
					</table>
					<img src="img/close.png"/>
				</div>
			</div></div>
			<div class="swiper-slide" style="background-position-x:41.16%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/8.png);"><img class="clickShow" src="img/click.gif"/>
				<div class="table1 table">
					<table border="0" cellspacing="0" cellpadding="0" style="top:0;">
						<tr><th>名称</th><th>详情</th></tr>
						<tr><td>5秒弹屏广告</td><td>3000元/次</td></tr>
						<tr><td>“新闻”右侧</td><td>2000元/次</td></tr>
						<tr><td>最新活动</td><td>1000元/次</td></tr>
						<tr><td>“生活”下方2/3通栏</td><td>1400元/次</td></tr>
						<tr><td>“论坛”右侧1/3通栏</td><td>800元/次</td></tr>
						<tr><td>“汽车”下方1/3通栏</td><td>700元/次</td></tr>
						<tr><td>“地产”下方2/3通栏</td><td>1200元/次</td></tr>
						<tr><td>新闻页品牌软文</td><td>3000元/次</td></tr>
						<tr><td>论坛贴内容页</td><td>1000元/次</td></tr>
						<tr><td>论坛置顶</td><td>500元/次</td></tr>
					</table>
					<img src="img/close.png"/ style="bottom:0;">
				</div>
			</div></div>
			<div class="swiper-slide" style="background-position-x:47.04%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/9.png);"><img class="clickShow" src="img/click.gif" style="top:75%;left:10%;"/>
				<div class="table1 table">
					<table border="0" cellspacing="0" cellpadding="0">
						<tr><th>名称</th><th>详情</th></tr>
						<tr><td>微博直发</td><td>4000元/条</td></tr>
						<tr><td>微博置顶</td><td>2000元/条</td></tr>
						<tr><td>微博转发</td><td>3000元/条</td></tr>
					</table>
					<img src="img/close.png"/>
				</div>
			</div></div>
			<div class="swiper-slide" style="background-position-x:52.92%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/10.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:58.8%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/11.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:64.68%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/12.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:70.56%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/13.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:76.44%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/14.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:82.32%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/15.png);"></div></div>
			<div class="swiper-slide" style="background-position-x:88.2%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/16.png);background-color:#000;"></div></div>
			<div class="swiper-slide" style="background-position-x:94.08%;"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/17.png);background-color:#000;"></div></div>
			<div class="swiper-slide" style="background-position-x:99.96%;" id="reload1"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/last.jpg);"></div></div>
			<!--<div class="swiper-slide" style="background-position-x:0%;" id="reload2"><div class="showImg ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" style="background-image:url(img/last.jp);"></div><div class="showImg ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1s" style="background-image:url(img/lianzi.png);"></div>--></div>
		</div>
	</div>
	<div class="swiper-container3">
		<div class="swiper-wrapper">
			<div class="swiper-slide" style="background-position-x:0;"></div>
			<div class="swiper-slide" style="background-position-x:5.88%;"></div>
			<div class="swiper-slide" style="background-position-x:11.76%;"></div>
			<div class="swiper-slide" style="background-position-x:17.64%;"></div>
			<div class="swiper-slide" style="background-position-x:23.52%;"></div>
			<div class="swiper-slide" style="background-position-x:29.4%;"></div>
			<div class="swiper-slide" style="background-position-x:35.28%;"></div>
			<div class="swiper-slide" style="background-position-x:41.16%;"></div>
			<div class="swiper-slide" style="background-position-x:47.04%;"></div>
			<div class="swiper-slide" style="background-position-x:52.92%;"></div>
			<div class="swiper-slide" style="background-position-x:58.8%;"></div>
			<div class="swiper-slide" style="background-position-x:64.68%;"></div>
			<div class="swiper-slide" style="background-position-x:70.56%;"></div>
			<div class="swiper-slide" style="background-position-x:76.44%;"></div>
			<div class="swiper-slide" style="background-position-x:82.32%;"></div>
			<div class="swiper-slide" style="background-position-x:88.2%;"></div>
			<div class="swiper-slide" style="background-position-x:94.08%;"></div>
			<div class="swiper-slide" style="background-position-x:99.96%;"></div>
		</div>
	</div>
	<script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
	var mySwiper,mySwiper2,mySwiper3
	window.onload = function(){
		
		var container = document.querySelector('.swiper-container');
		container.style.height = window.innerHeight+'px';
		container.style.width = window.innerWidth+'px';
		var container2 = document.querySelector('.swiper-container2');
		container2.style.height = window.innerHeight+'px';
		container2.style.width = window.innerWidth+'px';
		mySwiper = new Swiper ('.swiper-container', {
		  	initialSlider:1,
		    width:window.innerWidth,
		    height:window.innerHeight,
		    height:500,
		    roundLengths : true,
		    effect:'coverflow',
		    slidesPerView:3,
			onSlideChangeStart:function(swiper){
		    	//console.log(swiper.isBeginning);
		    },
		    coverflow: {
	            rotate: 60,
	            stretch: 1,
	            depth: 0,
	            modifier: 1,
	            slideShadows : true,
	            noSwiping:true
	       }
		});
		mySwiper2 = new Swiper ('.swiper-container2', {
		     initialSlider:1,
		    width:window.innerWidth,
		    height:window.innerHeight,
		    height:500,
		    roundLengths : true,
		    effect:'',
		    noSwiping:true,
			onImagesReady:function(){
				document.getElementById('loadding').style.display = 'none';
			},
			onTransitionStart:function(s){
				document.querySelector('.slideLeft').style.display = 'none';
				if(s.isBeginning&&s.translate>50){
					document.getElementById('index').style.display='block';
						
				}
			},
			onSlideChangeStart:function(swiper){
		    	//console.log(swiper.isBeginning);
		    },
		    onSlideChangeEnd:function(swiper){
		    	//swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
		    },
		    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			    //swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
			    //swiper.lockSwipes();
			  }, 
		});
		mySwiper3 = new Swiper ('.swiper-container3', {
		    initialSlider:1,
		    width:window.innerWidth,
		    height:window.innerHeight,
		    height:500,
		    noSwiping:true,
		    roundLengths : true,
		    effect:''
		});
		mySwiper.params.control = mySwiper2;
		mySwiper2.params.control = mySwiper;
		mySwiper.params.control = mySwiper3;
		mySwiper3.params.control = mySwiper;
		
		
		var cover = document.getElementById('index');
		var coverbtn = document.getElementById('indexbtn');
		cover.style.height = window.innerHeight+'px';
		cover.style.width = window.innerWidth+'px';
		cover.onclick = function(){
			window.scrollLeft = 0;
			cover.style.display = 'none';
		};
		cover.ontouchmove = function(e){
			e.stopPropagation();
			return false;	
		};
		
		var clicks = document.querySelectorAll('.swiper-container2 .swiper-slide');
		var shows = document.querySelectorAll('.table');
		for(var i=0;i<clicks.length;i++){
			clicks[i].onclick = function(){
				var show = this.querySelector('.table');
				if(show){
					if(show.style.display == 'block'){
						show.style.display = 'none';
					}else{
						show.style.display = 'block';
					}
					
				};
			}
		}
		
		document.querySelector('#reload1').onclick = document.querySelector('#reload2').onclick = function(e){
			if(e.clientY<window.innerHeight*0.55){
				

				//window.location.href = window.location.href+'?id='+parseInt(1000*Math.random());
			}else{
				//window.close();
				//WeixinJSBridge.call('closeWindow');
			}
			//
		};
	};      
	</script>
	<script>
		var audio = document.getElementById('audio');

			audio.canplay = function(){audioAutoPlay('audio');};

			audioAutoPlay('audio');

			

			function audioAutoPlay(id){

			    var audio = document.getElementById(id);

			    audio.play();

			    document.addEventListener("WeixinJSBridgeReady", function () {

			            audio.play();

			    }, false);

			}

			;(function(){
			var au = document.getElementById('audio');
			var cls = document.getElementById('cls');
			var flg = true;
			cls.onclick = function(){
				if(flg){
					au.pause();
					cls.className = "";
					flg = false;
				}else{
					au.play();
					cls.className = "rotate";
					flg=true;
				}
			};
		})();
	</script>
	<script>
		//==================微信配置=======================
		wx.config({
			debug: false,
			appId: 'wx9818b5f6a2309ff5',
			timestamp: 1501576089,
			nonceStr: 'ebSEWZXnyibfadrw',
			signature: '82c60fab874f78d11d3ee0a8f7d58c9823482393',
			jsApiList: [
			// 所有要调用的 API 都要加到这个列表中
			'hideOptionMenu','onMenuShareTimeline','onMenuShareAppMessage'
			]
		});

		wx.ready(function () {
			var title = '南国早报新媒体刊例';
			var link = 'http://pub.ngzb.com.cn/kanli';
			var imgUrl = 'http://pub.ngzb.com.cn/kanli/img/share.png';
			// 在这里调用 API
			//wx.hideOptionMenu();//答题页面隐藏分享按钮
			wx.onMenuShareTimeline({
				title: title, // 分享标题
				link: link, // 分享链接
				imgUrl: imgUrl, // 分享图标
				success: function () { 
					//alert('分享成功！');
				},

				cancel: function () { 
				}
			});
			wx.onMenuShareAppMessage({
				title: title, // 分享标题
				desc: '南国早报新媒体刊例', // 分享描述
				link: link, // 分享链接
				imgUrl: imgUrl, // 分享图标
				type: '',
				dataUrl: '',
				success: function () { 
					//alert('发送成功！');
				},

				cancel: function () { 
				}
			});
		});
	</script>
</body>
</html>